import QtQuick 2.0

Item {
    width: 300
    height: 620
    //color: "black"
    property int maxItems: 10

    function addItem(img, message, color) {
        logModel.insert(0, {"img": img, "message": message, "_color": color})
        while (logModel.count > maxItems)
            logModel.remove(logModel.count - 1)
    }

    Component { id: logDelegate
        Rectangle {
            id: logDelegateRect
            width: logList.width
            height: 16
            color: "transparent"
           // ColorAnimation on color { id: colorAnim; to: "transparent"; duration: 500; running: false }
            Image { id: icon; source: img; anchors.left: parent.left
                width: 16; height: 16
            }
            Text { id: text; color: _color; text: message; anchors.left: icon.right
                anchors.verticalCenter: parent.verticalCenter; anchors.leftMargin: 5
            }
            Timer { id: newTimer; interval: 5000; repeat: false
                onTriggered: colorAnim.start()
            }
//            ListView.onAdd: { newTimer.start(); addAnim.start() }
//            SequentialAnimation { id: addAnim
//                PropertyAction { target: logDelegateRect; property: "height"; value: 0 }
//                NumberAnimation { target: logDelegateRect; property: "height"; to: 16; duration: 250; easing.type: Easing.InOutQuad }
//            }
//            ListView.onRemove: SequentialAnimation {
//                PropertyAction { target: logDelegateRect; property: "ListView.delayRemove"; value: true }
//                NumberAnimation { target: logDelegateRect; property: "opacity"; to: 0.0; duration: 250; easing.type: Easing.InOutQuad }
//                // Make sure delayRemove is set back to false so that the item can be destroyed
//                PropertyAction { target: logDelegateRect; property: "ListView.delayRemove"; value: false }
//            }
        }
    }
    ListModel { id: logModel }
    ListView {
        id: logList
        anchors.fill: parent
        model: logModel
        delegate: logDelegate
    }
}
